<polymer-element name="index-links" attributes="page index">
	<template>
		<template if="{{index}}">
			<ul>
				<template repeat="{{link in links}}">
					<li><a href="{{link.href}}" alt="{{link.name}}">{{link.name}}</a></li>
				</template>
			</ul>
		</template>
		<template if="{{!index}}">
			<div style="width:100%;background-color:#fff;border-top:1px solid #ddd;text-align:center;margin-top:75px;">
				<strong>Other Examples: </strong>
				<template repeat="{{link in links}}">
				| <a href="{{link.href}}" alt="{{link.name}}" style="{{page==link.href ? 'font-weight:bold':''}}">{{link.name}}</a>
				</template> |
			</div>
		</template>
	</template>
	<script>
	Polymer('index-links', {
		index: false,
		links: [
			{ href:"themes.html", name:"Themes" },
			{ href:"css.html", name:"CSS" },
			{ href:"data-formats.html", name:"Data Formats" },
			{ href:"dom-elements.html", name:"DOM Elements" },
			{ href:"autogenerated-columns.html", name:"Auto-Generated Columns" },
			{ href:"table-templates.html", name:"Header, and Footer Templates" },
			{ href:"row-templates.html", name:"Row Templates" },
			{ href:"dynamic-columns.html", name:"Dynamically Changing Columns and Templates" },
			{ href:"large-dataset.html", name:"Larger Datasets" },
			{ href:"nested-tables.html", name:"Nesting Tables in Cells" },
			{ href:"paging.html", name:"Paging, Top N Rows" },
			{ href:"refreshing-data.html", name:"Refreshing Data" },
			{ href:"row-editor.html", name:"Row Editor" },
			{ href:"selected-rows.html", name:"Selected Rows" }
		]
	});
	</script>
</polymer-element>